<template>
  <div class="task_model tapStyle secondary-page-mode">
     <div class="secondary-toolbar">
          <span>参与方式 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;
          <span>排序方式 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;
          <span>任务状态 : </span>&nbsp;
          <div class="layoutBox" style="width:120px">
            <el-select v-model="value"  placeholder="请选择" @change="selectChange">
                  <el-option
                    v-for="item in optionData"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
            </el-select>
          </div>&emsp;
          <span>关键字 : </span>&nbsp;
          <div class="layoutBox" style="width:150px">
              <el-input placeholder="请输入关键字"></el-input>
          </div>&emsp;
          <el-button ><i class="iconfont icon-sousuo"></i>查询</el-button>
          
     </div>
     <div class="currency-mode-wrap">
      <p class="tit_p">全部任务</p>
      <ul class="table-content">
        <el-scrollbar style="height: 100%">
          <li class="clearfix" v-for="(v,i) in tableData" :key="i" :class="taskIndex == i?'current':''" @click="taskClick(v,i)">
            <div class="img-box"></div>
            <div class="content-box">
              <div class="tit">{{v.title}}</div>
              <el-row>
                <el-col :span="6"><div>起止时间:{{v.time}}</div></el-col>
                <el-col :span="4"><div>负责人:{{v.peo}}</div></el-col>
                <el-col :span="6"><div><span class="left">进度 : &emsp;</span>
                  <el-progress :percentage="v.jd" color="#166bce" :stroke-width="10"
                               style="width:calc(100% - 50px);display: inline-block;"></el-progress></div></el-col>
                <el-col :span="8">
                 <div style="text-align:center">
                   <span class="control-btn" @click="bzClikc(v)"><span class="icon bz" :class="{'act':v.over}"></span>&ensp;{{v.over?'已完成':'未完成'}}</span>
                  <span class="control-btn" @click="gzClikc(v)"><span class="icon gz" :class="{'act':v.gz}"></span>&ensp;{{v.gz?'已关注':'关注'}}</span>
                  <span class="control-btn"><i class="iconfont icon-gongxiang"></i>&ensp;共享</span>
                  </div>
                </el-col>
              </el-row>
            </div>
          </li>
        </el-scrollbar>
      </ul>
      <div class="table-pagination-wrap">
        <el-pagination
          @size-change="paginationSizeChange"
          @current-change="paginationChange"
          :current-page.sync="currentPage"
          :page-size="pageSize"
          popper-class="select-pagination-option"
          background
          :small="true"
          :page-sizes="pageList"
          layout="total, sizes, slot,->,prev, pager, next, jumper"
          :total="total">
            <span class="el-pagination__current">当前第{{ currentPage }}/{{totalPageNumber}}页</span>
        </el-pagination>
      </div>
     </div>
    <el-dialog
      title="任务详情"
      :visible.sync="dialogVisible"
      width="760px">
        <div>
              <table class="self_table">
                  <tr>
                    <td colspan="4"><div class="pad_p clearfix" style="padding:6px 0px;padding-left:24px;">基础信息
                      <el-button type="noticonsecondBtn" style='float:right'>删除</el-button>  
                    </div></td>
                  </tr>
                  <tr>
                    <td width='100px'><div class="tp">任务标题</div></td>
                    <td colspan="3"><div class="pad_p">设立保护区界标，警示牌、宣传牌</div></td>
                  </tr>
                  <tr>
                    <td  width='100px'><div class="tp">开始时间</div></td>
                    <td><div class="pad_p">2018-01-01</div></td>
                    <td  width='100px'><div class="tp">到期时间</div></td>
                    <td><div class="pad_p">2019-01-01</div></td>
                  </tr>
                   <tr>
                    <td  width='100px'><div class="tp">紧急程度</div></td>
                    <td><div class="pad_p">紧急</div></td>
                    <td  width='100px'><div class="tp">进度</div></td>
                    <td><div class="pad_p">
                        <div class="box_pro">
                              <el-progress :percentage="value3" v-if="!showSlider"></el-progress>
                              <el-slider v-model="value3" :show-tooltip="false" v-if="showSlider"></el-slider>
                              <span v-if="showSlider" class="slider_span">{{value3}}%</span>
                        </div>

                        <i class="iconfont icon-bianji1" style="float:right" @click="showSlider= !showSlider"></i>
                      </div></td>
                  </tr>
                   <tr>
                    <td  width='100px'><div class="tp">负责人</div></td>
                    <td><div class="pad_p">沙悟净</div></td>
                    <td  width='100px'><div class="tp">参与人员</div></td>
                    <td><div class="pad_p">沙悟净</div></td>
                  </tr>
                   <tr>
                    <td width='100px'><div class="tp">共享人员</div></td>
                    <td colspan="3"><div class="pad_p">沙悟净,沙悟净</div></td>
                  </tr>
                   <tr>
                    <td width='100px'><div class="tp">详情</div></td>
                    <td colspan="3"><div class="pad_p">协调湖泊与入湖河流的管理保护工作，确定湖泊管理保护目标任务，协调解决湖泊管理保护中的重大问题，组织制定“一湖一策”方案。</div></td>
                  </tr>
                   <tr>
                    <td width='100px'><div class="tp">附件信息</div></td>
                    <td colspan="3"><div class="pad_p">XXXXXXX.doc</p></div></td>
                  </tr>
                   <tr>
                    <td width='100px'><div class="tp">提醒</div></td>
                    <td colspan="3"><div class="pad_p">到期时间前 1 天提醒 创建人、负责人、参与人</p></div></td>
                  </tr>
              </table>
              <div class="second_tab_layout" style="margin-top:12px;">
                    <yf-tabs type="border-card" style="height:100%">
                        <yf-tab-pane label="任务反馈">
                              <div class="dialogcontent stap_content" style="padding:9px;">
                                    <div class="dialog-layout">
                                        <ul class="formul">
                                            <li>
                                                <div style="width:100%">
                                                      <span class="layoutspan">附件信息 : </span>&emsp;
                                                      <div class="layoutBox input_code" style="width:598px">
                                                        <el-input v-model="input" type="textarea" :rows="3"></el-input>
                                                      </div>
                                                </div>
                                            </li>
                                            <li>
                                                <span class="layoutspan">反馈意见 : </span>&emsp;
                                                      <el-upload
                                                        class="upload-demo"
                                                        ref="upload"
                                                        action="https://jsonplaceholder.typicode.com/posts/"
                                                        :on-preview="handlePreview"
                                                        :on-remove="handleRemove"
                                                        :file-list="fileList"
                                                        :auto-upload="false">
                                                        <span slot="trigger" class="upload_span_sc"><i class="icon-shangchuan1 iconfont"></i> 上传</span>

                                                      </el-upload>
                                            </li>
                                        </ul>
                                        <div class="btn" style="text-align:center">
                                               <el-button type="noticon">提 交</el-button>
                                             
                                        </div>
                                    </div>
                              </div>
                        </yf-tab-pane>
                        <yf-tab-pane label="查阅情况">
                            <div class="stap_content" >
                                <el-scrollbar style="height:100%">
                                  <el-timeline>
                                    <el-timeline-item
                                      v-for="(activity, index) in activities"
                                      :key="index"
                                     hide-timestamp
                                      :timestamp="activity.timestamp">
                                      <span>{{activity.timestamp}}</span> <span style="font-weight:700;color:#166bce">{{activity.name}}</span><span> {{activity.content}} </span>
                                   
                                    </el-timeline-item>
                                </el-timeline>
                               </el-scrollbar>
                            </div>
                        </yf-tab-pane>
                        <yf-tab-pane label="操作日志">
                         
                            <div class="stap_content">
                                  <el-table border :data='tableData'
                                  height="138px">
                                      <el-table-column
                                        type="index"
                                        label="序号"
                                        width="50">
                                      </el-table-column>
                                       <el-table-column
                                        prop=""
                                        label="操作时间"
                                        width="180">
                                      </el-table-column>
                                       <el-table-column
                                        prop=""
                                        label="操作人"
                                        width="150">
                                      </el-table-column>
                                       <el-table-column
                                        prop=""
                                        label="操作内容">
                                      </el-table-column>
                                  </el-table>
                                  <div class="table-pagination-wrap">
                                    <el-pagination
                                      @size-change="paginationSizeChange"
                                      @current-change="paginationChange"
                                      :current-page.sync="currentPage"
                                      :page-size="pageSize"
                                      popper-class="select-pagination-option"
                                      background
                                      :small="true"
                                      :page-sizes="pageList"
                                      layout="total, sizes, slot,->,prev, pager, next, jumper"
                                      :total="total">
                                      <template v-slot:default>
                                        <span class="el-pagination__current">当前第{{ currentPage }}/{{totalPageNumber}}页</span>
                                      </template>
                                    </el-pagination>
                                  </div>
                            </div>
                          
                        </yf-tab-pane>
                    </yf-tabs>
                </div>
        </div>
        <!-- <div slot="footer" class="dialog-footer">
          <el-button type="noticon" @click="dialogVisible = false">提 交</el-button>
          <el-button type="noticonsecondBtn" @click="dialogVisible = false">取 消</el-button>
        </div> -->
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "",
  data() {
    return {
      activities: [
        {
          name: "沙悟净",
          content: "查阅了此内容",
          timestamp: "2018-11-20 15:12:20"
        },
        {
          name: "沙悟净",
          content: "查阅了此内容",
          timestamp: "2018-11-20 15:12:20"
        },
        {
          name: "沙悟净",
          content: "查阅了此内容",
          timestamp: "2018-11-20 15:12:20"
        },
        {
          name: "沙悟净",
          content: "查阅了此内容",
          timestamp: "2018-11-20 15:12:20"
        },
        {
          name: "沙悟净",
          content: "查阅了此内容",
          timestamp: "2018-11-20 15:12:20"
        },
        {
          name: "沙悟净",
          content: "查阅了此内容",
          timestamp: "2018-11-20 15:12:20"
        },
        {
          name: "沙悟净",
          content: "查阅了此内容",
          timestamp: "2018-11-20 15:12:20"
        }
      ],
      taskIndex:0,
      dialogVisible: false,
      showSlider: false,
      dateRange: "",
      value3: 80,
      input: "",
      fileList: [],
      value: [1, 2, 3, 4, 5, 6, 7, 8, 9],
      optionData: [
        { value: 1, label: "水温", standard: "", isShow: true },
        { value: 2, label: "pH", standard: "6~9", isShow: true },
        { value: 3, label: "溶解氧", standard: "≥5", isShow: true },
        { value: 4, label: "电导率", standard: "", isShow: true },
        { value: 5, label: "浊度", standard: "", isShow: true },
        { value: 6, label: "高锰酸盐", standard: "6", isShow: true },
        { value: 7, label: "氨氮", standard: "1", isShow: true },
        { value: 8, label: "总磷", standard: "0.2", isShow: true },
        { value: 9, label: "总氮", standard: "", isShow: true }
      ],
      selectCheck: [], //选中的监测项目
      currentPage: 1, //分页组件当前页
      total: 32, //分页总条数
      pageSize: 5, //分页每页多少条数据
      pageList: [5, 10, 20], //设置每页多少条
      tableData: [
        {
          title: "设立保护区界标，警示牌，宣传牌",
          peo: "夏春和",
          time: "2018.09.13~2018.10.22",
          jd: 100,
          over: true,
          gz: false
        },
        {
          title: "设立保护区界标，警示牌，宣传牌",
          peo: "夏春和",
          time: "2018.09.13~2018.10.22",
          jd: 50,
          over: false,
          gz: true
        },
        {
          title: "设立保护区界标，警示牌，宣传牌",
          peo: "夏春和",
          time: "2018.09.13~2018.10.22",
          jd: 50,
          over: true,
          gz: false
        },
        {
          title: "设立保护区界标，警示牌，宣传牌",
          peo: "夏春和",
          time: "2018.09.13~2018.10.22",
          jd: 38,
          over: false,
          gz: true
        },
        {
          title: "生态文明重点建设",
          peo: "刘和民",
          time: "2018.09.13~2018.10,22",
          jd: 50,
          over: true,
          gz: true
        }
      ]
    };
  },
  created() {
    this.$store.commit("setShowlefttree", false);
  },
  methods: {
    taskClick(item,key){
        this.taskIndex=key;
        this.dialogVisible=true;
    },
    selectChange(arr) {
      this.selectCheck = arr;
    },
    indexMethod(index) {
      return index + 1;
    },
    paginationChange(val) {
      //分页页码改变时执行
      this.currentPage = val;
    },
    paginationSizeChange(val) {
      //分页pageSize改变时执行
      this.currentPage = 1;
      this.pageSize = val;
    },
    bzClikc(v) {
      v.over = !v.over;
    },
    gzClikc(v) {
      v.gz = !v.gz;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePreview(file) {
      console.log(file);
    }
  },
  computed: {
    totalPageNumber() {
      //计算总页数
      let number = 0;
      number = Math.ceil(this.total / this.pageSize);
      return number;
    }
  }
};
</script>

<style scoped lang="less">
.task_model {
  height: 100%;
  .currency-mode-wrap {
    border: 1px solid #d9e6f7;

    .tit_p {
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      border-bottom: 1px solid #d9e6f7;
      padding-left: 16px;
      &:before {
        content: "";
        display: inline-block;
        width: 3px;
        height: 10px;
        background: #166bce;
        margin: 0 6px 1px 0;
      }
    }
    .table-content {
      height: calc(100% - 78px);
      padding: 8px 16px;
      li {
       // border: 1px solid #d9e6f7;
        padding: 15px 20px;
        cursor: pointer;
        > div {
          float: left;
        }
        .img-box {
          width: 45px;
          height: 45px;
          // background: url("../../assets/images/component/rw.png") no-repeat;
        }
        .content-box {
          width: calc(100% - 55px);
          height: 45px;
          margin: 0 0 0 10px;
          .tit {
            height: 30px;
            margin: 0;
            font-weight: bold;
          }
          .control-btn {
            display: inline-block;
            padding: 0 10px;
            cursor: pointer;
            height: 15px;
            width: 80px;
            line-height: 12px;
            .iconfont {
              font-size: 16px;
            }
            .icon {
              display: inline-block;
              width: 13px;
              height: 13px;
              position: relative;
              top: 1px;
              &.bz {
                background: url("../../assets/images/checkedBtn/btn02.png");
                &.act {
                  background: url("../../assets/images/checkedBtn/btn01.png");
                }
              }
              &.gz {
                background: url("../../assets/images/checkedBtn/xing02.png");
                &.act {
                  background: url("../../assets/images/checkedBtn/xing01.png");
                }
              }
            }
          }

          div {
            vertical-align: top;
          }
        }
      }
      .current{
         border: 1px solid #d9e6f7;
      }
      li + li {
        margin-top: 8px;
      }
    }
    .table-pagination-wrap {
      margin-top: 5px;
      padding: 0 16px;
      border: 0px;
      > div {
        padding: 0;
      }
    }
  }
}
.self_table {
  width: 100%;
  border: 1px solid #d6e3f2;
  border-collapse: collapse;
  td {
    border: 1px solid #d6e3f2;
    padding: 0;
    color: #1a1a1a;
    .pad_p {
      padding-left: 24px;
      line-height: 30px;
      padding-right: 12px;
      .box_pro {
        width: 90%;
        float: left;
        position: relative;
        .slider_span {
          position: absolute;
          right: 4px;
          top: -6px;
        }
      }
      > i {
        float: right;
        line-height: 16px;
        cursor: pointer;
        color: #166bce;
      }
    }
    .tp {
      text-align: center;
    }
  }
}
.stap_content {
  height: 185px;
  padding: 9px;
}
</style>
